import React, { useEffect, useState } from "react";
import '../../appcommon.css';
import styles from './invitedetail.module.css';
import { useDispatch } from "react-redux";
import { DotLoading, Mask } from "antd-mobile";
import { saveEvent } from "@/store/actions/saveEvent";
import { useHistory } from "react-router-dom/cjs/react-router-dom.min";


import NavigateBar from "@/components/NavigateBar";
import { LangEn } from "@/utils/langEn";

/**
 * 登录页
 */
export default function InviteEarnRules() {

    //loading状态
    const [maskVisible, setMaskVisible] = useState(false)

    //显示add home弹框
    const [addHomeMaskVisible, setAddHomeMaskVisible] = useState(false);
    const [addHomeMaskIsHomeMode, setAddHomeMaskIsHomeMode] = useState(true);

    // 当前 列表
    const [curList, setCurList] = useState([]);

    // 文案翻译
    const [curLang, setCurLang] = useState(LangEn);

    // 获取 Redux 分发器
    const dispatch = useDispatch()

    //router
    const history = useHistory()

    //清空登录信息
    useEffect(() => {
        //关闭loading
        setMaskVisible(false);

        setCurList([
            '1. The platform provides each user with an exclusive invitation link/invitation code. Users who register their wallets through your invitation link are considered as users invited by you.',
            '2. You will receive an invitation reward equivalent to 20% of the rewards generated by the users you have invited when they deposit digital assets.',
            '3. The invitation reward will fluctuate based on the earnings generated by the friends you have invited.',
            '4. The invitation rewards you receive will be calculated based on the realized rewards generated by the friends you have invited.',
            '5. The earnings generated on the same day cannot be withdrawn on the same day and must be withdrawn on the following day. The minimum withdrawal amount for invitation rewards is 100 USDT each time.',
            '6. The platform does not tolerate fraudulent invitation activities, and any discovered fraudulent invitations will result in the invalidation of invitation rewards.',
            '7. The right to interpret belongs to this platform.'
        ])

        //打点
        doHitEvent("INVITE_EARN_RULES_START")

        return () => {
            //打点
            doHitEvent("INVITE_EARN_RULES_END")
        }
    }, [])

    //打点接口
    const doHitEvent = async (type, remark = "") => {
        console.log("doHitEvent: " + type + " , " + remark);

        try {
            //获取Action
            const action = saveEvent(type, remark)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    return (
        <div className='pageRoot pageBackgroundColorGray'>
            <NavigateBar theme="white" showLogout={false} onAddFavorite={() => { setAddHomeMaskIsHomeMode(false); setAddHomeMaskVisible(true) }} onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }}>Invite earn rule</NavigateBar>

            {/* 使用添加 home screen bar */}
            {/* <AddFavorite onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }} /> */}

            <div className="pageContentColumnFull">
                {/* 菜单 列表 */}
                <div className="pageContentColumnFull">
                    <div className={styles.inviteDetailList}>
                        {curList && curList.map((value, index) => {
                            return (
                                <div className={styles.inviteDetailListItemRule} key={index}>
                                    <div className={styles.inviteDetailListItemTitleRule}>{value}</div>
                                </div>
                            )
                        })}
                    </div>
                </div>
            </div>

            {/* 底部 margin */}
            <div className="pageBottomEdge"></div>

            {/* load mask */}
            <Mask visible={maskVisible} opacity={0.1}
                onMaskClick={() => { }}>
                <div className="pageLoadingOverlayContent">
                    <span style={{ fontSize: 24, color: '#3498DB' }} >
                        <DotLoading color="currentColor" />
                    </span>
                </div>
            </Mask>
        </div >
    )
}